<template>
  <div>
    <template>
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in imageList">
          <img :src="item.src">
        </el-carousel-item>
      </el-carousel>
    </template>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <!-- 弹出转载弹窗 -->
    <el-dialog title="文章转载" :visible.sync="reprintDialogVisible" width="30%" center>
      <div style="width: 100% hight: 100%">
        <span slot="footer">
          <span>文章链接:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-input v-model="reprint.link" placeholder="文章链接" style="width: 80% "></el-input>
          <br>
          <br>
          <br>
          <span>是否已得到授权:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-switch v-model="reprint.isAuthorize" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          <br>
          <br>
          <br>
          <span>归&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <template>
            <el-select v-model="reprint.sort" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.code" :value="item.id"></el-option>
            </el-select>
          </template>
          <br>
          <br>
          <br>
          <span>&nbsp;转&nbsp;载&nbsp;者:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-input v-model="reprint.author" placeholder="转载者" style="width: 80% "></el-input>
          <br>
          <br>
          <br>
          <br>
        </span>
      </div>
      <div style="text-align: center">
        <el-button @click="reprintDialogVisible = false">取 消</el-button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-button type="primary" @click="saveReprint()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 转载弹窗结束 -->
    <!-- 弹出心情弹窗 -->
    <el-dialog title="心情" :visible.sync="moodDialogVisible" width="30%" center>
      <div style="width: 100% hight: 100%">
        <span slot="footer">
          <span style="text-align: center;">心情怎么样:&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <br>
          <br>
          <br>
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="moodValue" resize="none"></el-input>
          <br>
          <br>
          <br>
          <br>
        </span>
      </div>
      <div style="text-align: center">
        <el-button @click="moodDialogVisible = false">取 消</el-button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-button type="primary" @click="saveMood()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 心情弹窗结束 -->
    <!-- 弹出音乐弹窗 -->
    <el-dialog title="播放器" :visible.sync="musicDialogVisible" width="30%" center>
      <div style="width: 100% hight: 100%">
        <aplayer
          autoplay
          listMaxHeight="none"
          :music="{
					title: 'secret base~君がくれたもの~',
					artist: 'Silent Siren',
					src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
					pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
				}"
        ></aplayer>
        <br>
        <br>
        <br>
        <br>
      </div>
      <div style="text-align: center">
        <el-button @click="musicDialogVisible = false">取 消</el-button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-button type="primary" @click="musicDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 音乐弹窗结束 -->
    <!-- 弹出联系管理员弹窗 -->
    <el-dialog title="联系管理员" :visible.sync="aboutDialogVisible" width="30%" center>
      <div style="width: 100% hight: 100%">
        <span>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题:&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-input v-model="email_title" placeholder="标题" style="width: 80% "></el-input>
        <br>
        <br>
        <br>
        <span>联系邮箱:&nbsp;&nbsp;&nbsp;</span>
        <el-input v-model="email_email" placeholder="填写自己常用邮箱" style="width: 80% "></el-input>
        <br>
        <br>
        <br>
        <span slot="footer">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="嘘寒问暖不如打笔巨款"
            v-model="email_textValue"
            resize="none"
          ></el-input>
          <br>
          <br>
          <br>
          <br>
        </span>
      </div>
      <div style="text-align: center">
        <el-button @click="aboutDialogVisible = false">取 消</el-button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-button type="primary" @click="saveEmail()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 联系管理员弹窗结束 -->
    <div style="height:100%;width:100%">
      <el-row :gutter="20" justify="space-between" type="flex">
        <el-col :span="5">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../../assets/images/original.jpg" class="image">
            <div style="padding: 14px;">
              <span class="text-span">原创投稿</span>
              <div class="bottom clearfix">
                <el-button type="primary" round size="medium" @click="toNewArticle()">投稿</el-button>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="5">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../../assets/images/reprint.jpg" class="image">
            <div style="padding: 14px;">
              <span class="text-span">文章转载</span>
              <div class="bottom clearfix">
                <el-button
                  type="primary"
                  round
                  size="medium"
                  @click="reprintDialogVisible = true"
                >转载</el-button>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="5">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../../assets/images/music.png" class="image">
            <div style="padding: 14px;">
              <span class="text-span">听听音乐</span>
              <div class="bottom clearfix">
                <el-button type="primary" round size="medium" @click="musicDialogVisible = true">音乐</el-button>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="5">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../../assets/images/mood.png" class="image">
            <div style="padding: 14px;">
              <span class="text-span">心情怎么样</span>
              <div class="bottom clearfix">
                <el-button type="primary" round size="medium" @click="moodDialogVisible = true">心情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="5">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img src="../../../assets/images/call.jpg" class="image">
            <div style="padding: 14px;">
              <span class="text-span">联系管理员</span>
              <div class="bottom clearfix">
                <el-button type="primary" round size="medium" @click="aboutDialogVisible = true">滴滴</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Aplayer from "vue-aplayer";

export default {
  data() {
    return {
      //文章转载对象
      reprint: {
        id: null,
        link: null, //链接
        isAuthorize: false, //是否授权
        sort: null, //分类
        author: null, //作者
        IsEnable: 0, //是否审批
        dr: 0,
        madeTime: "", //创建时间
        delTime: "" //删除时间
      },
      imageList: [], //轮播图的图片列表
      reprintDialogVisible: false, //文章转载弹窗的是否显示控制
      moodDialogVisible: false, //心情弹窗的是否显示控制
      musicDialogVisible: false, //音乐弹窗的是否显示控制
      aboutDialogVisible: false, //关于弹窗的是否显示控制
      options: [], //文章转载，分类的枚举值
      optionvalue: "", //文章转载，分类的默认值
      moodValue: "", //这是mood的value
      messageType: "", //这是消息的类型
      messageValue: "", //这是消息的值
      email_textValue: "", //联系管理员的文本域值
      email_title: "", //联系站长的标题
      email_email: "", //联系站长的用户邮箱
      value2: "",
      textarea: "",
      username: ""
    };
  },
  methods: {
    // 消息弹窗
    message() {
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },

    toNewArticle() {
      //跳转到新建文章页面
      this.$router.push({
        path: "/newArticle"
      });
    },

    //获得轮播图的图片
    getImgs() {
      // console.log("已经进到这个方法里面了");
      this.$axios
        .get("/images/getImages")
        .then(successResponse => {
          this.imageList = successResponse.data;
        })
        .catch(failResponse => {}); //失败后的操作
    },

    //获得文章分类
    getSort() {
      // console.log("已经进到这个方法里面了");
      this.$axios
        .get("/sort/getSort")
        .then(successResponse => {
          this.options = successResponse.data;
        })
        .catch(failResponse => {}); //失败后的操作
    },

    //保存心情
    saveMood() {
      // console.log(this.moodValue);
      if (this.moodValue.length > 50) {
        this.messageType = "error";
        this.messageValue = "发布心情失败,字数超过五十字";
        this.message();
        return;
      }
      if (this.moodValue.length == 0) {
        this.messageType = "error";
        this.messageValue = "发布心情失败,内容不能为空";
        this.message();
        return;
      }
      this.$axios
        .get("/mood/saveMood", {
          params: {
            moodValue: this.moodValue
          }
        })
        .then(successResponse => {
          if (successResponse.data == "success") {
            this.messageType = "success";
            this.messageValue = "发布心情成功";
          } else {
            this.messageType = "error";
            this.messageValue = "发布心情失败";
          }
          this.message();
        })
        .catch(failResponse => {});
      this.moodDialogVisible = false;
      this.moodValue = "";
    },

    //保存联系管理员信息
    saveEmail() {
      // console.log(this.moodValue);
      if (this.email_textValue.length > 50) {
        this.messageType = "error";
        this.messageValue = "发送失败,联系内容字数超过五十字";
        this.message();
        return;
      }
      if (this.email_title.length > 20) {
        this.messageType = "error";
        this.messageValue = "发送失败,标题字数超过二十字";
        this.message();
        return;
      }
      if (this.email_textValue.length == 0) {
        this.messageType = "error";
        this.messageValue = "发送失败,内容不能为空";
        this.message();
        return;
      }
      if (this.email_title.length == 0) {
        this.messageType = "error";
        this.messageValue = "发送失败,标题不能为空";
        this.message();
        return;
      }
      if (this.email_email.length == 0) {
        this.messageType = "error";
        this.messageValue = "发送失败,邮箱不能为空";
        this.message();
        return;
      } else {
        var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!regEmail.test(this.email_email)) {
          this.messageType = "error";
          this.messageValue = "邮箱格式不正确";
          this.message();
          return;
        }
      }
      this.$axios
        .get("/email/saveEmail", {
          params: {
            title: this.email_title,
            detail: this.email_textValue,
            email: this.email_email
          }
        })
        .then(successResponse => {
          if (successResponse.data == "success") {
            this.messageType = "success";
            this.messageValue = "发送消息成功";
          } else {
            this.messageType = "error";
            this.messageValue = "发送消息失败";
          }
          this.message();
        })
        .catch(failResponse => {});
      this.aboutDialogVisible = false;
      this.email_email = "";
      this.email_textValue = "";
      this.email_title = "";
    },
    // 保存转载文章
    saveReprint() {
      // console.log(this.reprint);
      this.messageType = "error"; //先设置成错误，后面的判断就不用设置了，axios里面会根据返回值再给massagetype赋值
      if (this.reprint.link == null) {
        this.messageValue = "文章链接不能为空";
        this.message();
        return;
      }
      if (this.reprint.sort == null) {
        this.messageValue = "文章分类不能为空";
        this.message();
        return;
      }
      if (this.reprint.author == null) {
        this.messageValue = "文章作者不能为空";
        this.message();
        return;
      }
      this.$axios({
        method: "post",
        url: "/reprint/saveReprint",
        data: JSON.stringify(this.reprint)
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageType = "success";
          this.messageValue = "发布文章成功，等待审核";
          this.message();
          // this.$router.push({ path: "/index" });
        } else {
          this.messageType = "error";
          this.messageValue = "发布文章失败，如有问题请联系管理员";
          this.message();
        }
      });
      this.reprintDialogVisible = false;
    }
  },
  components: {
    aplayer: Aplayer
  },
  created() {
    this.getImgs();
    this.getSort();
  }
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 下面是卡片 */
.bottom {
  margin-top: 20px;
  text-align: center;
}

.image {
  height: 100%;
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.text-span {
  text-align: center;
  display: block;
}
</style>
